<template>
  <div class="search-result">
    <div class="result-item border-bottom"
      v-for="(item,index) of results"
      :key="index"
      @click="$_updateStorage(item[0])">{{item[0]}}
    </div>
  </div>
</template>
<script>
import { searchMixin } from '@/assets/js/mixin'
import { getResultInfo } from '@/api/search'
export default {
  name: 'searchResult',
  data () {
    return {
      results: []
    }
  },
  mixins: [searchMixin],
  props: {
    queryText: String
  },
  watch: { // 监控接收到的搜索文本的变化，一旦发生变化则请求异步数据
    queryText (value) {
      getResultInfo(value).then(res => {
        this.results = res
      })
    }
  }

}
</script>
<style lang="stylus" scoped>
.search-result
  .result-item
    padding-left 10px
    font-size 18px
    line-height 2
</style>
